<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="alert alert-primary">
                    <p>
                        <b>设置说明</b>
                    </p>
                    <p>
                        本模块设置平台收取商家的提现订单所产生的服务费用以及平台抽成。
                        <br>
                        服务费率按百分比计算,填写的服务费要大于0,并且不大于两位小数,
                    </p>
                </div>
                <div class="region-goods-details">
                    <el-row>
                        <el-col :span="4">
                            <div class="region-goods-left">商家利率</div>
                        </el-col>
                        <el-col :span="20">
                            <div class="region-goods-right">
                                <el-form :model="setUpForm" label-width="120px" :rules="rules" ref="formRef">
                                    <el-form-item prop="admin_user_id" label="商家">
                                        <el-select v-model="setUpForm.admin_user_id" placeholder="请选择商家">
                                            <el-option v-for="item in BusinessListings" :key="item.id" :label="item.account"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="服务费率:" prop="withdrawal_rate">
                                        <el-input v-model="setUpForm.withdrawal_rate" placeholder="输入抽取的服务费"
                                            style="width: 30%;" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="resetForm(formRef)">取消</el-button>
                                        <el-button type="primary" @click="confirmWithdrawalRate(formRef)">确认</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { businessList, setWithdrawalRate } from '@/api/business'
import { ElMessage } from 'element-plus'

const route = useRoute()
const routes = ref()
const BusinessListings = ref([])
const setUpForm = reactive({
    admin_user_id: '',
    withdrawal_rate: ''
})
const formRef = ref()
const rules = reactive({
    admin_user_id: [
        { required: true, message: '选择商家', trigger: 'blur' },
    ],
    withdrawal_rate: [
        { required: true, message: '输入商家要支付的费用率', trigger: 'blur' },
        { pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '有两位小数的正实数', trigger: 'blur' }
    ]
})

onMounted(() => {
    routes.value = route.matched
    getBusinessList()
})
const getBusinessList = async () => {
    await businessList().then(res => {
        const { code, data } = res
        if (code == 200) {
            if (Object.keys(data).length == 0) {
                BusinessListings.value = []
            } else {
                BusinessListings.value = data.data
            }
        }
    })
}
const confirmWithdrawalRate = async (formElement) => {
    if (!formElement) return
    if (setUpForm.admin_user_id == '') {
        ElMessage.error('请选择商家')
        return
    } else if (setUpForm.withdrawal_rate <= 0) {
        ElMessage.error('设置利率需大于0')
        return
    }
    formElement.validate(async (valid) => {
        if (valid) {
            const result = await setWithdrawalRate(setUpForm).then(r => {
                const { code, data } = r
                if (code == 200) {
                    ElMessage.success('设置成功利率')
                    setUpForm.admin_user_id = ''
                    setUpForm.withdrawal_rate = ''
                }
            })
        } else {
            ElMessage.error('请正确填写费用率!')
            return false
        }
    })

}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="less" scoped>
.mian-content {
    height: 750px;
}
</style>